<template>
	<view class="content">
		<scroll-view
			scroll-y
			class="scroll"
			refresher-enabled
			:refresher-triggered="isLoading"
			@scrolltolower="onBottomLoad"
			@refresherrefresh="onRefreshData"
		>
			<view class="list" v-if="list.length">
				<view class="news-wrap" v-for="item in list" :key="item" @click="goDetail(item)">
					<view class="news">
						<image :src="item.raceImg" class="news-img" mode="aspectFill"></image>
						<view class="news-right">
							<u--text
								:text="item.raceName"
								bold
								size="30rpx"
								lines="1"
								margin="8rpx 0 24rpx"
							></u--text>
							<u-icon
								name="map"
								color="#999"
								size="16"
								:label="item.raceRegion"
								labelSize="28rpx"
								labelColor="#999"
							></u-icon>
							<view style="margin-top: 20rpx">
								<u-icon
									name="clock"
									color="#999"
									size="14"
									:label="item.groupStartTime"
									labelSize="26rpx"
									labelColor="#999"
								></u-icon>
							</view>
						</view>
					</view>
					<view class="flex-align news-footer">
						<u--text
							:text="`报名项目:${item.groupName}`"
							bold
							size="28rpx"
							lines="1"
							color="#333"
						></u--text>
						<u-button
							v-if="item.isClose === 1"
							text="已取消"
							color="#bebfbf"
							shape="circle"
							size="small"
							customStyle="width:150rpx;height:52rpx;font-size:32rpx"
						></u-button>
						<u-button
							v-else-if="item.refund === 1 || item.refund === 2"
							:text="item.refund === 1 ? '退款中' : '已退款'"
							color="#bebfbf"
							shape="circle"
							size="small"
							customStyle="width:150rpx;height:52rpx;font-size:32rpx"
						></u-button>
						<u-button
							v-else-if="item.pay === 0"
							text="继续支付"
							color="#0071c5"
							shape="circle"
							size="small"
							:throttleTime="1500"
							customStyle="width:150rpx;height:52rpx;font-size:32rpx;position:relative;z-index:2;"
							:hoverStopPropagation="true"
							@click.native.stop="onGoPayment('list', item.raceId)"
						></u-button>
						<!-- 	<u-button
							v-else-if="item.compete !== 0"
							:text="item.compete === 1 ? '已中签' : '未中签'"
							:color="item.compete === 1 ? '#e50012' : '#bebfbf'"
							shape="circle"
							size="small"
							customStyle="width:150rpx;height:52rpx;font-size:32rpx"
						></u-button> -->
						<u-button
							v-else-if="item.pay == 1"
							text="支付成功"
							color="#e50012"
							shape="circle"
							size="small"
							customStyle="width:150rpx;height:52rpx;font-size:32rpx"
						></u-button>
					</view>
				</view>
				<u-loadmore
					fontSize="13"
					line
					marginTop="18"
					:status="status"
					loading-text="努力加载中~"
					loadmore-text="上拉加载更多~"
				/>
			</view>
			<view style="padding-top: 300rpx" v-else>
				<u-empty mode="list" width="250" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
import orderMixin from './orderMixin.js'
export default {
	mixins: [orderMixin],
	data() {
		return {
			isLoading: false,
			status: 'nomore', // loadmore / loading / nomore
			list: [],
			pages: 1,
			raceId: ''
		}
	},
	onLoad(options) {
		this.raceId = options.raceId || ''
		this.isLoading = true
	},
	methods: {
		getOrderList() {
			this.status = 'loading'
			const data = this.raceId ? { raceId: this.raceId } : ''
			/* prettier-ignore */
			this.$https(true, 'get', {
				url: `/member/order/list/${this.pages}`,
				data
			},(res) => {
				this.list = this.list.concat(res.data)
				this.isLoading= false
				if(res.data.length<10){
					this.status = 'nomore'
				}else{
					this.status = 'loadmore'
				}
			},(error)=>{
				this.isLoading = false
			})
			/* prettier-ignore */
		},
		// 下拉刷新
		onRefreshData() {
			this.isLoading = true
			this.pages = 1
			this.list = []
			this.getOrderList()
		},
		// 上拉加载
		onBottomLoad() {
			if (this.status === 'loadmore') {
				this.pages++
				this.getOrderList()
			}
		},
		goDetail(item) {
			this.$utils.navigateTo(
				true,
				`/pagesA/my/order/detail?id=${item.orderId}&sign=${item.compete}`
			)
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	position: relative;
}
.scroll {
	width: 100%;
	height: 100vh;
}
.num-grey {
	color: rgba(0, 0, 0, 0.7);
	margin-right: 10rpx;
}
.list {
	padding: 0 26rpx;
	.news {
		display: flex;
		position: relative;
		&-wrap {
			width: calc(100% - 40rpx);
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 24rpx 20rpx;
		}
		&-img {
			width: 160rpx;
			height: 160rpx;
		}
		&-right {
			margin-left: 26rpx;
			max-width: 500rpx;
			width: 500rpx;
		}
		&-footer {
			margin-top: 30rpx;
			padding: 20rpx 14rpx 0;
			border-top: 1px #eee dashed;
		}
	}
}
.detail-tlt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10rpx;
	padding: 28rpx 24rpx 0;
	&-r {
		color: #1e74f3;
		font-size: 28rpx;
	}
}
.flex-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 12rpx 24rpx 24rpx;
}
button {
	margin: 0;
	padding: 0;
}
.fixed-buttom {
	height: 44px;
	line-height: 44px;
	padding: 0;
}
</style>
